<template>
	<!-- 视频随手拍 -->
	<view class="content">
		<!-- 内容盒子 -->
		<view class="form">
			<!-- form begin -->
			<uni-forms label-position="top">
				<uni-forms-item label="反馈描述" name="name" required>
					<uni-easyinput type="textarea" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="附件" name="name" required>
					<view class="row">
						<uni-file-picker fileMediatype="image" limit="9" mode="grid" @select="handleImgSelect"
							@delete="handleImgDelete" :auto-upload="false">
							<template #default>
								<view class="default">
									<image src="/static/img/advise/default-image.png"></image>
									<view>添加图片</view>
								</view>
							</template>
						</uni-file-picker>
					</view>
					<view class="row">
						<!-- <view class="grid">
                            <view class="default">
                                <image src="/static/img/advise/default-video.png"></image>
                                <view>添加视频</view>
                            </view>
                        </view> -->

						<uni-file-picker fileMediatype="video" limit="9" mode="grid" @select="handleVideoSelect"
							@delete="handleVideoDelete" :auto-upload="false">
							<template #default>
								<view class="default">
									<image src="/static/img/advise/default-video.png"></image>
									<view>添加视频</view>
								</view>
							</template>
						</uni-file-picker>
					</view>
					<!-- <view class="row">
                        <uni-file-picker limit="9" mode="grid">
                            <template #default>
                                <view class="default">
                                    <image src="/static/img/advise/default-recorder.png"></image>
                                    <view>添加语音</view>
                                </view>
                            </template>
                        </uni-file-picker>
                    </view> -->
				</uni-forms-item>
			</uni-forms>
			<!-- form end -->
			<!-- form-submit begin -->
			<view class="footer">
				<button type="button" class="back">返回</button>
				<button type="button" class="submit" @tap="onSubmit">提交</button>
			</view>
			<!-- form-submit end -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [], //图片列表
				videoList: [], //视频列表
				recorderList: [], //语音列表
			}
		},
		onLoad() {},
		methods: {
			/**
			 * 处理图片选择
			 * @param {*} e 
			 */
			handleImgSelect(e) {
				e.tempFiles.map(fileRes => {
					const imgObj = {
						cloudPath: fileRes.cloudPath,
						url: fileRes.url,
						fileType: fileRes.fileType
					};
					this.imgList.push(imgObj);
				});
			},
			/**
			 * 处理图片删除
			 * @param {*} e 
			 */
			handleImgDelete(e) {
				const num = this.imgList.findIndex(v => v.url === e.tempFilePath);
				this.imgList.splice(num, 1);
			},
			uploadImg(tempFilePaths, token) {
				if (!tempFilePaths.length) return; //如果没有选择图片就退出
				console.log('uploadImg', tempFilePaths, token);
			},
			/**
			 * 处理视频选择
			 * @param {*} e 
			 */
			handleVideoSelect(e) {
				console.log('e', e);
				e.tempFiles.map(fileRes => {
					const imgObj = {
						cloudPath: fileRes.cloudPath,
						url: fileRes.url,
						fileType: fileRes.fileType
					};
					this.videoList.push(imgObj);
				});
			},
			/**
			 * 处理视频删除
			 * @param {*} e 
			 */
			handleVideoDelete(e) {
				const num = this.videoList.findIndex(v => v.url === e.tempFilePath);
				this.videoList.splice(num, 1);
			},
			onSubmit() {
				console.log('submit1', this.imgList);
				console.log('submit2', this.videoList);
				console.log('submit3', this.recorderList);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx;
	}

	.form {
		width: 100%;
		padding: 30rpx;
		background-color: $bg-color-white;
		border-radius: $border-radius-lg;

		.uni-forms-item {
			margin-bottom: 10rpx !important;
		}

		.row {
			display: flex;
			// justify-content: space-between;
			flex-wrap: wrap;
			padding: 20rpx 0;

			.grid {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex: none !important;
				// margin: 20rpx 0;
				width: 33%;

				image {
					width: 190rpx;
					height: 190rpx;
					border-radius: 20rpx;
				}
			}

			/deep/ .uni-file-picker__container {
				margin: 0 !important;
			}

			/deep/ .file-picker__box-content {
				border: none !important;
			}

			.default {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 40rpx;
				// margin: 20rpx;
				border: 1rpx solid #c7c7c7;
				border-radius: 20rpx;

				image {
					width: 50rpx !important;
					height: 50rpx !important;
				}

				view {
					padding-top: 20rpx;
				}
			}
		}
	}

	.footer {
		height: 120rpx;
		padding: 10rpx 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		z-index: 10;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

		button {
			width: 100%;
			height: 80%;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;
			color: #FFFFFF !important;
			background: #ad2325 !important;
			margin: 0 20rpx;
		}

		.back {
			background: #FFF !important;
			color: #434141 !important;
			border: 1rpx solid #8d8d8d !important;
		}
	}
</style>